import React from 'react';
import RcTweenOne from 'rc-tween-one';
import PropTypes from 'prop-types';
import {observer} from 'mobx-react';
import motionCONST from 'common/const/observer/motion';
import SvgMorphPlugin from 'rc-tween-one/lib/plugin/SvgMorphPlugin';
import POLYPATH_COSNT from 'common/const/polyPath';
import css from './index.less';
RcTweenOne.plugins.push(SvgMorphPlugin);

@observer
export default class TweenOne extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
    elementId: PropTypes.number,
    motion: PropTypes.object,
    rotates: PropTypes.object,
    onMotionEnd: PropTypes.func,
  };

  static defaultProps = {
    elementId: PropTypes.number,
    motion: PropTypes.object,
    rotates: {
      rotate: 0,
      rotateX: 0,
      rotateY: 0,
      skewX: 0,
      skewY: 0,
    },
    onMotionEnd: () => {}
  };

  constructor(props) {
    super(props);
    this.rotate = props.rotates.rotate;
    this.rotateX = props.rotates.rotateX;
    this.rotateY = props.rotates.rotateY;
    this.skewX = props.rotates.skewX;
    this.skewY = props.rotates.skewY;
    this.moment = 0;
  }

  getAnimate() {
    const {elementId, motion} = this.props;
    this.moment = 0;
    const animation = [];
    const svgAnimation = [];

    motion.list.forEach((frame, index) => {
      let eleFrame = {};
      let svgPath = {};

      frame.list.forEach(element => {
        if (element.realId === elementId) { // 便利的帧元素是否为当前elementId元素
          console.log('element.background', element.background);
          motionCONST.forEach(style => {

            const set100 = key => {
              eleFrame[key] = element[key] / 100;
            };

            const setUnit = (key, unit) => {
              eleFrame[key] = `${element[key]}${unit}`;
            };

            const setRotate = key => {
              const rotate = element[key] - this[key];
              this[key] = element[key];
              eleFrame[key] = `${rotate}deg`;
            };

            const setPercentage50 = key => {
              eleFrame[key] = `${element[key] / 2}%`;
            };

            switch (style.key) {
              case 'scaleX' :
              case 'scaleY':
              case 'opacity': {
                set100(style.key);
                break;
              }
              case 'grayScale':
              case 'brightness':
              case 'contrast':
              case 'sepia':
              case 'saturate':
              case 'invert': {
                setUnit(style.key, '%');
                break;
              }
              case 'blur': {
                setUnit(style.key, 'px');
                break;
              }
              case 'hueRotate': {
                setUnit(style.key, 'deg');
                break;
              }
              case 'rotate':
              case 'rotateX':
              case 'rotateY':
              case 'skewX':
              case 'skewY': {
                setRotate(style.key);
                break;
              }
              case 'borderRadius': {
                if (element.animationType !== 'svg') setPercentage50(style.key);
                break;
              }
              case 'borderColor': {
                if (element.animationType === 'svg') svgPath.stroke = element.borderColor;
                else eleFrame.borderColor = element.borderColor;
                break;
              }
              case 'borderWidth': {
                if (element.animationType === 'svg') svgPath.strokeWidth = element.borderWidth;
                else eleFrame.borderWidth = element.borderWidth;
                break;
              }
              case 'borderStyle': {
                if (element.animationType !== 'svg') eleFrame.borderWidth = element.borderWidth;
                if (element.animationType === 'svg' && element.dashArray.length) {
                  // console.log('dashArray', element.dashArray);
                  // svgPath.strokeDasharray = element.dashArray.join();
                }

                break;
              }
              case 'background': {
                // console.log('element.background', element.background);
                if (element.animationType === 'svg') svgPath.fill = element.background;
                else eleFrame.backgroundColor = element.background;
                break;
              }
              default: {
                eleFrame[style.key] = element[style.key];
              }
            }
          });

          if (element.animationType === 'svg') {
            svgPath.d = POLYPATH_COSNT(element.width, element.height)
              .filter(item => item.side === element.side)[0].path;
          }
          // 帧元素缓动函数
          eleFrame.ease = element.ease;
          svgPath.ease = element.ease;
        }
      });

      // 播放帧持续时间和延迟时间
      if (index) {
        eleFrame.duration = frame.duration;
        eleFrame.delay = frame.delay;
        this.moment += frame.duration + frame.delay;
        // svg
        svgPath.duration = frame.duration;
        svgPath.delay = frame.delay;
        this.moment += svgPath.duration + svgPath.delay;
      } else {
        // 第一帧没有动画
        eleFrame.duration = 0;
        eleFrame.delay = 0;
        // svg
        svgPath.duration = 0;
        svgPath.delay = 0;
      }

      animation.push(eleFrame);
      svgAnimation.push(svgPath);
    });
    return {animation, svgAnimation};
  }

  componentDidMount() {
    this.props.motion.update('isPlay', true);
  }

  render() {
    const { mod, children, motion, onMotionEnd } = this.props;
    const getAnimate = this.getAnimate();

    const props = {
      // style,
      animation: motion.isPlay ? getAnimate.animation : [],
      onChange: (e) => {
        // onChange(e)
        if (e.moment >= this.moment) {
          // console.log('动画执行完成！e ======', e);
          onMotionEnd(e);
          motion.update('isPlay', false);
        }
      },
      className: css.tweenOne,
    };
    if (mod.animationType === 'svg') {
      // console.log('this.mod', mod);
      const pathProps = {
        animation: getAnimate.svgAnimation,
        component: 'path',
        attr: 'attr'
      };
      return (
        <RcTweenOne {...props}>
          <svg version="1.2" style={{width: '100%', height: '100%'}}>
            <RcTweenOne {...pathProps}/>
          </svg>
        </RcTweenOne>
      );
    }
    return (
      <RcTweenOne {...props}>
        {children}
      </RcTweenOne>
    );
  }
}
